Frontend Presentation API Displeyni Boshqarish: Global Ilovalar Uchun Ko'p Displeyli Konfiguratsiya

Bugungi o'zaro bog'langan dunyoda veb-ilovalar endi bitta brauzer oynasi bilan cheklanib qolmaydi. Frontend Presentation API dasturchilarga o'z ilovalarini bir nechta displeylarga kengaytirish uchun kuchli imkoniyatni taqdim etadi va bu yaxshilangan foydalanuvchi tajribalari uchun ko'plab imkoniyatlarni ochadi. Ushbu qo'llanma Presentation API'ning nozik jihatlarini, xususan, ko'p displeyli konfiguratsiyaga e'tibor qaratgan holda o'rganadi va global auditoriya uchun dolzarb bo'lgan amaliy misollarni taqdim etadi.

Presentation API'ni Tushunish

Presentation API - bu veb-ilovalarga asosiy displeydan farqli kontentni ko'rsatish uchun ikkilamchi displey yoki taqdimot ekranidan foydalanish imkonini beruvchi veb-standart. Bu ayniqsa quyidagi holatlarda foydalidir:

• Anjumanlar Zallari: Taqdimotlarni noutbukdan proyektorga uzatish.
• Savdo Kiosklari: Foydalanuvchi kichikroq sensorli ekran bilan ishlayotganda mahsulot ma'lumotlarini katta ekranda ko'rsatish.
• Raqamli Lavhalar: Jamoat joylarida bir nechta ekranlar bo'ylab dinamik kontentni translyatsiya qilish.
• O'yinlar: O'yin tajribasini kengaytirish, chuqurroq sho'ng'ish yoki qo'shimcha ma'lumot berish uchun ikkinchi ekranga chiqarish.
• Ta'lim Muhiti: Talabalar individual qurilmalarda ishlayotganda o'quv materiallarini katta ekranda ko'rsatish.

API quyidagi asosiy tushunchalar atrofida qurilgan:

• PresentationRequest: Taqdimot seansini boshlash uchun ishlatiladigan obyekt.
• PresentationConnection: Boshqaruvchi sahifa va taqdimot sahifasi o'rtasidagi aloqani ifodalovchi obyekt.
• PresentationReceiver: Taqdimot sahifasida boshqaruvchi sahifadan xabarlarni qabul qiluvchi obyekt.

Ko'p Displeyli Konfiguratsiyani Sozlash

Presentation API'dan foydalanishning birinchi qadami mavjud displeylarni aniqlash va taqdimot seansini boshlashdir. Jarayonning tahlili quyidagicha:

1. Mavjud Displeylarni Aniqlash

navigator.presentation.getAvailability() metodi PresentationAvailability obyekti bilan yakunlanadigan "promise" qaytaradi. Bu obyekt taqdimot displeyi hozirda mavjud yoki mavjud emasligini ko'rsatadi.

            
navigator.presentation.getAvailability()
  .then(function(availability) {
    if (availability.value) {
      console.log('Presentation display is available.');
    } else {
      console.log('Presentation display is not available.');
    }

    availability.onchange = function() {
      if (availability.value) {
        console.log('Presentation display became available.');
      } else {
        console.log('Presentation display became unavailable.');
      }
    };
  });

            

              
                Copy
              
            
          

Ushbu kod parchasi taqdimot displeyi mavjudligini tekshiradi va uning mavjudligidagi o'zgarishlarni kuzatadi. Taqdimot displeylari mavjudligidagi o'zgarishlarga dinamik ravishda javob berish uchun onchange hodisasini qayta ishlash muhim.

2. Taqdimot Seansini Boshlash

Taqdimotni boshlash uchun taqdimot sahifasining URL manzilini ko'rsatgan holda PresentationRequest obyektini yarating.

            
let presentationRequest = new PresentationRequest(['presentation.html']);

presentationRequest.start()
  .then(function(connection) {
    console.log('Presentation started successfully.');
    // Handle the presentation connection
    connection.onmessage = function(event) {
      console.log('Received message:', event.data);
    };
    connection.onclose = function() {
      console.log('Presentation closed.');
    };
    connection.onerror = function(event) {
      console.error('Presentation error:', event.error);
    };
  })
  .catch(function(error) {
    console.error('Failed to start presentation:', error);
  });

            

              
                Copy
              
            
          

Ushbu kod ikkilamchi ekranda ko'rsatiladigan kontent sifatida presentation.html'dan foydalanib, taqdimot seansini ishga tushiradi. Keyin u aloqani o'rnatadi va xabarlar, yopilish va xatolar uchun hodisa tinglovchilarini sozlaydi.

3. Taqdimot Sahifasi (PresentationReceiver)

Taqdimot sahifasi boshqaruvchi sahifadan xabarlar qabul qilishga tayyor bo'lishi kerak. Bunga PresentationReceiver obyekti yordamida erishiladi.

            
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    console.log('Received connection:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });

  connectionList.onconnectionavailable = function(event) {
    let connection = event.connection;
    console.log('New connection available:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  };
});

            

              
                Copy
              
            
          

Ushbu kod parchasi taqdimotni qabul qiluvchi sahifadagi kiruvchi ulanishlarni tinglaydi va boshqaruvchi sahifadan olingan xabarlarni qayta ishlaydi hamda taqdimot displeyining tarkibini shunga mos ravishda yangilaydi.

Kengaytirilgan Ko'p Displeyli Konfiguratsiya

Asosiy taqdimot funksionalligidan tashqari, Presentation API yanada murakkab ko'p displeyli konfiguratsiyalarga imkon beradi. Mana bir nechta ilg'or usullar:

1. Muayyan Displeyni Tanlash

Presentation API to'g'ridan-to'g'ri mavjud displeylarni sanab o'tish va ma'lum birini tanlash usulini taqdim etmaydi. Biroq, siz URL manzillar massivi bilan PresentationRequest konstruktoridan foydalanishingiz mumkin. Shunda foydalanuvchi agenti foydalanuvchiga tanlov oynasini taqdim etadi va qaysi displeydan foydalanishni tanlashga imkon beradi.

2. Dinamik Kontent Yangilanishlari

PresentationConnection.postMessage() metodi boshqaruvchi sahifa va taqdimot sahifasi o'rtasida real vaqt rejimida aloqa o'rnatish imkonini beradi. Bu foydalanuvchi harakatlari yoki ma'lumotlar o'zgarishlariga asoslangan holda taqdimot kontentini dinamik ravishda yangilashga imkon beradi.

            
// Sending a message from the controlling page
connection.postMessage('Hello, presentation display!');

// Receiving the message on the presentation page
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });
});

            

              
                Copy
              
            
          

Ushbu misol boshqaruvchi sahifadan taqdimot sahifasiga oddiy matnli xabar yuborishni ko'rsatadi, so'ngra u o'z tarkibini yangilaydi.

3. Turli Displey Rezolyutsiyalari va Tomonlar Nisbatlarini Boshqarish

Kontentni bir nechta displeylarda taqdim etayotganda, ekranlarning turli xil rezolyutsiyalari va tomonlar nisbatlarini hisobga olish juda muhim. Kontentingiz turli displey o'lchamlariga mos ravishda moslashishini ta'minlash uchun CSS media so'rovlari va moslashuvchan maketlardan foydalaning. Elementlarni ekran o'lchamiga mutanosib ravishda masshtablash uchun "viewport" birliklaridan (vw, vh, vmin, vmax) foydalanishni o'ylab ko'ring.

            
/* Example CSS for handling different screen sizes */
@media (min-aspect-ratio: 16/9) {
  .content {
    width: 80vw;
    height: 90vh;
  }
}

@media (max-aspect-ratio: 4/3) {
  .content {
    width: 90vw;
    height: 75vh;
  }
}

            

              
                Copy
              
            
          

Ushbu CSS misoli displeyning tomonlar nisbatiga qarab kontent elementining o'lchamlarini sozlash uchun media so'rovlaridan foydalanadi.

4. Internatsionallashtirish va Mahalliylashtirish

Global ilovalar uchun internatsionallashtirish (i18n) va mahalliylashtirishni (l10n) hisobga olish zarur. HTML-da tegishli til teglaridan foydalaning, barcha matnli kontent uchun tarjimalarni taqdim eting va sanalar, raqamlar va valyutalarni foydalanuvchining hududiy sozlamalariga muvofiq formatlang. JavaScript'dagi Xalqaro API (Intl) bu borada juda foydali bo'lishi mumkin.

            
// Formatting a number according to a specific locale
let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('de-DE').format(number); // Output: 1.234.567,89

// Formatting a date according to a specific locale
let date = new Date();
let formattedDate = new Intl.DateTimeFormat('ja-JP').format(date); // Output: 2023/10/27

            

              
                Copy
              
            
          

Ushbu misollar Intl API yordamida turli hududiy sozlamalarga muvofiq raqamlar va sanalarni qanday formatlashni ko'rsatadi.

5. Qulay Foydalanishni Hisobga Olish (Accessibility)

Ko'p displeyli ilovalaringiz imkoniyati cheklangan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling. Rasmlar uchun muqobil matn taqdim eting, semantik HTML-dan foydalaning va ilovangiz klaviatura yordamida boshqarilishi mumkinligini ta'minlang. Dinamik kontentning qulayligini oshirish uchun ARIA atributlaridan foydalanishni ko'rib chiqing.

Global Ilovalar Uchun Amaliy Misollar

Presentation API'ning global ilovalarda qanday ishlatilishi mumkinligiga oid bir nechta amaliy misollar:

• Xalqaro Konferensiya Taqdimotlari: Taqdimotchilarga noutbuklarida ma'ruzachi qaydlarini ko'rib, taqdimotni boshqarib turgan holda, slaydlarni proyektorda namoyish etish imkonini beruvchi veb-ilova. Ilova bir nechta tillarni qo'llab-quvvatlashi va taqdimotchilarga turli ekran o'lchamlari uchun taqdimot maketini sozlash imkonini berishi kerak.
• Global Savdo Kiosklari: Foydalanuvchilarga sensorli ekranda mahsulotlarni ko'rib chiqish va xarid qilish imkonini bergan holda, mahsulot ma'lumotlarini katta ekranda ko'rsatadigan kiosk ilovasi. Ilova bir nechta valyuta, til va to'lov usullarini qo'llab-quvvatlashi kerak.
• Ko'p Tilli Raqamli Lavhalar: Jamoat joylaridagi bir nechta ekranlarda yangiliklar sarlavhalari, ob-havo ma'lumotlari va reklamalar kabi dinamik kontentni namoyish etadigan raqamli lavhalar tizimi. Kontent har bir displeyning mahalliy tiliga avtomatik ravishda tarjima qilinishi kerak.
• Masofaviy Jamoalar Uchun Hamkorlikdagi Doska: Geografik jihatdan tarqoq jamoalarga real vaqt rejimida hamkorlik qilish imkonini beruvchi veb-asosidagi doska ilovasi. Ikkilamchi displey ma'lum bir hududning yaqinlashtirilgan ko'rinishini ko'rsatishi yoki qo'shimcha ma'lumot materiallarini taqdim etishi mumkin.

Kod Misoli: Dinamik Yangilanishlarga Ega Oddiy Taqdimot

Quyida dinamik yangilanishlarga ega oddiy taqdimotni namoyish etuvchi to'liq kod misoli keltirilgan:

Boshqaruvchi Sahifa (index.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Presentation API Example</title>
</head>
<body>
  <h1>Controlling Page</h1>
  <button id="startButton">Start Presentation</button>
  <input type="text" id="messageInput" placeholder="Enter message">
  <button id="sendMessageButton">Send Message</button>

  <script>
    let connection;
    let presentationRequest = new PresentationRequest(['presentation.html']);

    document.getElementById('startButton').addEventListener('click', function() {
      presentationRequest.start()
        .then(function(conn) {
          connection = conn;
          console.log('Presentation started successfully.');
          connection.onmessage = function(event) {
            console.log('Received message:', event.data);
          };
          connection.onclose = function() {
            console.log('Presentation closed.');
          };
          connection.onerror = function(event) {
            console.error('Presentation error:', event.error);
          };
        })
        .catch(function(error) {
          console.error('Failed to start presentation:', error);
        });
    });

    document.getElementById('sendMessageButton').addEventListener('click', function() {
      if (connection) {
        let message = document.getElementById('messageInput').value;
        connection.postMessage(message);
      } else {
        alert('Presentation not started.');
      }
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Taqdimot Sahifasi (presentation.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Presentation Display</title>
  <style>
    body {
      font-size: 2em;
      text-align: center;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <h1>Presentation Display</h1>
  <div id="content"></div>

  <script>
    navigator.presentation.receiver.connectionList.then(function(connectionList) {
      connectionList.connections.forEach(function(connection) {
        console.log('Received connection:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      });

      connectionList.onconnectionavailable = function(event) {
        let connection = event.connection;
        console.log('New connection available:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      };
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Ushbu misol taqdimotni boshlash uchun tugma hamda taqdimot displeyiga xabar yuborish uchun matn kiritish maydoni va tugmaga ega bo'lgan oddiy boshqaruvchi sahifani yaratadi. Taqdimot displeyi xabarlarni qabul qiladi va o'z tarkibini shunga mos ravishda yangilaydi.

Umumiy Muammolarni Bartaraf Etish

• Taqdimot Displeyi Aniqlanmadi: Ikkilamchi displey ulanganligiga va operatsion tizim sozlamalarida yoqilganligiga ishonch hosil qiling. Brauzer mosligini tekshiring va eng so'nggi versiyasiga yangilang.
• Taqdimot Boshlanmayapti: Taqdimot URL manzili to'g'ri va mavjud ekanligini tekshiring. JavaScript konsolidagi har qanday xatoliklarni tekshiring.
• Xabarlar Qabul Qilinmayapti: PresentationConnection to'g'ri o'rnatilganligiga va onmessage hodisa tinglovchisi ham boshqaruvchi, ham taqdimot sahifalarida to'g'ri sozlanganligiga ishonch hosil qiling.
• Domenlararo Muammolar (Cross-Origin): Agar boshqaruvchi sahifa va taqdimot sahifasi turli domenlarda joylashgan bo'lsa, manbalar o'rtasidagi aloqaga ruxsat berish uchun CORS (Cross-Origin Resource Sharing) to'g'ri sozlanganligiga ishonch hosil qiling.

Presentation API'ning Kelajagi

Presentation API doimiy rivojlanib borayotgan texnologiyadir. Kelajakdagi yaxshilanishlar quyidagilarni o'z ichiga olishi mumkin:

• Displeylarni sanab o'tish va tanlashni takomillashtirish.
• Taqdimot maketi va uslubi ustidan yanada murakkabroq nazorat.
• Kengaytirilgan xavfsizlik xususiyatlari.
• To'ldirilgan va virtual reallik tajribalari uchun WebXR kabi boshqa veb-API'lar bilan integratsiya.

Xulosa

Frontend Presentation API veb-ilovalarni bir nechta displeylarga kengaytirish uchun kuchli mexanizmni taqdim etadi, bu esa keng ko'lamli innovatsion foydalanuvchi tajribalarini yaratishga imkon beradi. API'ning asosiy tushunchalarini tushunib, ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilgan holda, dasturchilar global auditoriya uchun jozibali va samarali ko'p displeyli ilovalarni yaratishlari mumkin. Xalqaro konferensiya taqdimotlaridan tortib ko'p tilli raqamli lavhalargacha, imkoniyatlar cheksizdir. Presentation API'ning kuchini qabul qiling va ko'p displeyli veb-ilovalarning salohiyatini oching.